import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router'
import {Table, Button,Row,Col,Icon,Layout, Breadcrumb,Input,DatePicker,Dropdown,Popconfirm, Menu,message} from 'antd';
// import SelectPageTable from '../../components/SelectPageTable.js';
import style from '../../styles/TableCss.less';
import reqwest from 'reqwest';
import stylet from '../../styles/TableCss.less';
import {role_case} from '../../models/Role.js';
const {  Content, Footer ,Sider} = Layout;
// const { RangePicker } = DatePicker;
function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}
function onOk(value) {
  console.log('onOk: ', value);
}
function onPatch(e,a){
	// reqwest({
 //    url: window.host+'/api/admin/users/:id',
 //    method: 'patch',
 //    crossOrigin: true,
 //    data: {
 //      // access_token:localStorage['token'],
 //      access_token:'1D34Z4i+CRE5DkYEBrpbhrigA+QU2lzIwEVqALrVmhQnPXO/THJGQvAPhLkwjO6U/czFYRNBoSwE9k8EQEA3RQ==',
 //      user:{name:}
 //    },
 //    type: 'json',
 //  }).then((data) => {
 //  	console.log(data);
	//     const pagination = { ...this.state.pagination };
 //  // Read total count from server
 //  // pagination.total = data.totalCount;
 //  });
 console.log(e);
}
// <Link to={{pathname:'/app/newacunt',query:{'current':this.props.location.query.current,name:record.name,tel:record.mobile,role:record.role}}}>编辑</Link>
					      // <span className="ant-divider" />
class AccountList extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data: [],
		    pagination: {},
		    loading: false,
	        selectedRowKeys: [],
	        dropDown:'所有客户',
	        columns :[{
					  title: '用户姓名',
					  dataIndex: 'name',
					  sorter: true,
					}, {
					  title: '用户电话',
					  dataIndex: 'mobile',
					  // filters: [
					  //   { text: 'Male', value: 'male' },
					  //   { text: 'Female', value: 'female' },
					  // ],
					}, {
					  title: '用户分类',
					  dataIndex: 'role_text',
					}, {
					  title: '操作',
					  key: 'action',
					  render: (text, record) => (
					    <span>
					     	<Popconfirm title="确认删除吗?" onConfirm={(e) => this.onDelete(record.key, e,this)}>
					     		<a>删除</a>
					     	</Popconfirm>
					    </span>
					  ),
					}]
		}
	}
	onDelete(key,e,_this){
    // const data = _this.state.data.filter(item => item.key !== key);
    // _this.setState({data });
    // debugger;
    reqwest({
      url: window.host+'/api/users/'+key,
      method: 'delete',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
      },
      type: 'json',
    }).then((data) => {
    	console.log(data);
    	if(data.status=='success'){
	 	    const pagination = { ...this.state.pagination };
	 	    message.success('删除成功',0.1)
	 	    _this.fetch({page:1});
    	}else{
    		message.warning(data.msg,0.1)
    	}
	    // Read total count from server
	    // pagination.total = data.totalCount;

    });
  }
	handleTableChange(pagination, filters, sorter){
    const pager = { ...this.state.pagination };
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {}) {
    console.log('params:', params);
    let _data=[];

    this.setState({ loading: true });
    reqwest({
      url: window.host+'/api/users',
      method: 'get',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        // access_token:'1D34Z4i+CRE5DkYEBrpbhrigA+QU2lzIwEVqALrVmhQnPXO/THJGQvAPhLkwjO6U/czFYRNBoSwE9k8EQEA3RQ==',
        page:params.page,
      },
      type: 'json',
    }).then((data) => {
    	console.log(data);
   	    const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
        pagination.total = data.total;
        // debugger
        for(let i of data.list){
	        _data.push({
	        	key:i.id,
	        	name:i.name,
	        	mobile:i.mobile,
	        	role_text:role_case[i.role],
	        	role:i.role
	        })
	    }
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
  }
  onSelectChange (selectedRowKeys){
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  }
	componentWillMount(){
		this.fetch({page:1});
	}
	menuClick(e){
		this.setState({dropDown:e.item.props.value});
	}
	handleRowClick(e){
		console.log(1)
	}
	render(){
		const { selectedRowKeys,data,pagination,loading,dropDown,columns } = this.state;
		const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
      onSelection: this.onSelection,
  	};
  	const customerMemu=(
  		<Menu onClick={this.menuClick.bind(this) } selectedKeys={[dropDown]}>
		    <Menu.Item value='所有客户'>
		      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">所有客户</a>
		    </Menu.Item>
		    <Menu.Item value='我的客户'>
		      <a target="_blank" rel="noopener noreferrer" >我的客户</a>
		    </Menu.Item>
		    <Menu.Item>
		      <a target="_blank" rel="noopener noreferrer">客户</a>
		    </Menu.Item>
		  </Menu>
  	)
		return(
			<Layout style={{height:'100%'}}>
				<Content>
				<Row type='flex'  style={{background:'#fff',borderBottom:'1px dashed #d9d9d9'}}>
          <Col span={7} xl={{span:7}} xs={7} style={{padding:'24px 25px 0px'}}>

            <Breadcrumb style={{fontSize:14}}>
              <Breadcrumb.Item>账号管理</Breadcrumb.Item>
            </Breadcrumb>
          </Col>
          <Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} xs={{span:2,offset:12}} style={{lineHeight:'60px',textAlign:'right'}}>
						<Button style={{textAlign:'right'}}><Link to={{pathname:'/app/newacunt',query:{current:this.props.location.query.current}}}>新建用户</Link></Button>
					</Col>
				</Row>
        <div style={{ background: '#fff', padding: '0px 24px',}}>
					<Layout style={{background:'#fff'}}>
						<Row type='flex' className={`${stylet.tb_ser}`}>
							<Col span={6}>

							</Col>
							<Col span={6} offset={12}>

							</Col>
						</Row>
			      <Table columns={columns}
			        dataSource={data} onRowClick={this.handleRowClick}
			        pagination={pagination}
			        loading={loading}
			        onChange={this.handleTableChange.bind(this)}
			      />
		      </Layout>
	      </div>
				</Content>
			</Layout>
		)
	}
}
// rowSelection={rowSelection} 批量删除

AccountList.PropTypes={

}
export default connect()(AccountList);
